<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        ul {
            display: flex;
            width: 1200px;
            margin: auto;
            flex-wrap: wrap;
        }

        li {
            width: 23%;
            margin: 1%;

        }

        img {
            width: 100%;
            height: 300px;
        }

        .page {
            font-size: 50px;
            width: 1200px;
            margin: auto;
        }

        .off {
            color: gray;
        }
    </style>
</head>

<body>

    <ul>
        <!-- <li>
            <a href="">
                <img src="" alt="">
                <h3></h3>
                <p></p>
                <strong></strong>
            </a>
        </li> -->
    </ul>

    <div class="page">
        <span class="prev off">&lt;</span>
        <span class="showPage">1 / 10</span>
        <span class="next">&gt;</span>
    </div>


    <script src="../js/list.js"></script>
    <script>

        // 分页
        //    变量  控制显示第几页  page = 1
        //    总共多少数据      后端给的数组   length
        //    每一页有多少数据   UI给的  pageLen = 7
        //    总共有多少页？     length / pageLen   除不尽  向上取整

        //   第一页   0-8
        //   第二页   8-16
        //   第三页   16-24
        //   第四页   24-32  总共有28条数据   24-28

        //   第page页   (page-1) * pageLen --  page * pageLen

        //   上翻页 page--
        //   下翻页  page++



        // 打印数据
        console.log(list);

        var page = 1;

        var pageLen = 8;  // 每一页显示的数据条数  --- UI给的图  8是随便写了

        var pageAll = Math.ceil(list.length / pageLen);   // 总页数

        // console.log(pageAll);   // 4

        // 总页数显示出来

        var oShowPage = document.querySelector('.showPage');
        oShowPage.innerHTML = '1 / ' + pageAll;







        // 显示第一页的数据   0-8
        render()

        function render() {
            var html = '';
            for (var i = (page - 1) * pageLen; i < (page * pageLen > list.length ? list.length : page * pageLen); i++) {
                html += `
            <li>
                <a href="">
                    <img src="${list[i].pic}" alt="">
                    <h3>${list[i].name}</h3>
                    <p>${list[i].city}</p>
                    <strong>${list[i].price}</strong>
                </a>
            </li>
            `
            }

            var oUl = document.querySelector('ul');

            oUl.innerHTML = html
        }







        // 下翻页
        var oNext = document.querySelector('.next');
        var oPrev = document.querySelector('.prev');
        oNext.onclick = function () {
            if (this.classList.contains('off')) {
                return
            }
            page++;
            if (oPrev.classList.contains('off')) {
                oPrev.classList.remove('off');
            }
            if (page === pageAll) {
                this.classList.add('off');
            }
            render();
            // 显示页数
            oShowPage.innerHTML = page + ' / ' + pageAll;
        }




    </script>

</body>

</html>